<!--
 * @Author: tianhao
 * @Date: 2022-12-29 15:15:58
 * @LastEditTime: 2023-02-21 15:45:34
 * @LastEditors: tianhao
 * @Description: 
 * @FilePath: \dcollege\src\views\task\task.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div class="top">
    <var-icon name="chevron-left" :size="30" class="ret" @click="fanHui()" />
    <div class="title1">软件设计</div>
    <var-space :size="[10, 10]">
      <var-button type="primary" round class="bt" @click="search">
        <svg
          t="1672299506005"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2425"
          width="15"
          height="15"
        >
          <path
            d="M966.4 924.8l-230.4-227.2c60.8-67.2 96-156.8 96-256 0-217.6-176-390.4-390.4-390.4-217.6 0-390.4 176-390.4 390.4 0 217.6 176 390.4 390.4 390.4 99.2 0 188.8-35.2 256-96l230.4 227.2c9.6 9.6 28.8 9.6 38.4 0C979.2 950.4 979.2 934.4 966.4 924.8zM102.4 441.6c0-185.6 150.4-339.2 339.2-339.2s339.2 150.4 339.2 339.2c0 89.6-35.2 172.8-92.8 233.6-3.2 0-3.2 3.2-6.4 3.2-3.2 3.2-3.2 3.2-3.2 6.4-60.8 57.6-144 92.8-233.6 92.8C256 780.8 102.4 627.2 102.4 441.6z"
            p-id="2426"
            fill="#ffffff"
          ></path>
        </svg>
      </var-button>
    </var-space>
    <div class="avg">
      <var-image src="./image/avg.png" class="img" />
      <div class="font1">平均正确率</div>
      <div class="font2">27%</div>
    </div>
    <div class="count">
      <var-image src="./image/count.png" class="img" />
      <div class="font1">做题总数量</div>
      <div class="font2">6道</div>
    </div>
    <div class="time">
      <var-image src="./image/time.png" class="img" />
      <div class="font1">做题总时间</div>
      <div class="font2">6分钟</div>
    </div>
    <a href="/zhenti">
      <div class="ques">
        <var-image src="./image/ques.png" class="img" />
        <div class="word1">模拟试题</div>
        <div class="word2">共{{ list.total }}道真题</div>
      </div></a
    >
    <a href="/zhenti">
      <div class="overques">
        <var-image src="./image/overques.png" class="img" />
        <div class="word1">历年真题</div>
        <div class="word2">共{{ list.total }}道真题</div>
      </div></a
    >
  </div>
  <div class="title2">精选试题</div>
  <div class="jingxuan" v-for="ti in list.records">
    <router-link :to="{ name: 'dlpage', query: { name: ti.name, count: 24 } }">
      <div class="q">
        <div class="multiple">多选题</div>
        <div class="title3">{{ ti.name }}</div>
        <!-- <div class="level">难易程度</div> -->
      </div>
    </router-link>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRef } from "vue";
import { computed, ref } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { useExamStore } from "@/stores/exam";
import $ from "jquery";

const examStore = useExamStore();
const { getExamLists } = examStore;
getExamLists();
const { list } = storeToRefs(examStore);

// console.log(examList.value)
// import { useUserStore } from '../../stores/user';
// const userstore  = useUserStore();
// userstore.getuser()
// const {user}  = storeToRefs(userstore);
// console.log(user.value)
const router = useRouter();

function search() {
  router.push("/search");
}
function zhenTi() {
  router.push("/dlPage");
}
function fanHui() {
  router.go(-1);
}
function tiaozhuan() {
  sessionStorage.setItem("list", JSON.stringify(list));
  this.$router.push({});
}

// const data = ref([
//   {
//     id: 1,
//     title: "【2021真题】 如何实现中国社会学本土化目标",
//     level: 1,
//     count: 25,
//   },
//   {
//     id: 2,
//     title: "【2021真题】 如何实现中国社会学本土化目标",
//     level: 1,
//     count: 25,
//   },
//   { id: 3, title: "【2021真题】 如何实现中国目标", level: 1, count: 25 },
// ]);
</script>

<style lang="less" scoped>
.top {
  width: 100%;
  height: 330px;
  background-image: linear-gradient(rgb(173, 191, 255), white);
  border-bottom: none;
}
.ret {
  float: left;
  margin-top: 30px;
}
.title1 {
  font-size: 20px;
  position: absolute;
  margin-top: 30px;
  margin-left: 150px;
}
.bt {
  margin-left: 320px;
  margin-top: 25px;
}

.avg {
  width: 105px;
  height: 120px;
  background-color: white;
  float: left;
  border-radius: 10px;
  margin-right: 10px;
  margin-top: 20px;
  margin-left: 0px;
  .img {
    width: 50px;
    height: 50px;
    margin: 20px 30px;
  }
  .font1 {
    text-align: center;
    font-size: 15px;
    margin-top: -20px;
  }
  .font2 {
    text-align: center;
    font-size: 15px;
  }
}
.count {
  width: 105px;
  height: 120px;
  background-color: white;
  float: left;
  border-radius: 10px;
  margin-right: 10px;
  margin-top: 20px;
  .img {
    width: 40px;
    height: 40px;
    margin: 27px 37px;
  }
  .font1 {
    text-align: center;
    font-size: 15px;
    margin-top: -24px;
  }
  .font2 {
    text-align: center;
    font-size: 15px;
  }
}
.time {
  width: 105px;
  height: 120px;
  background-color: white;
  float: left;
  border-radius: 10px;
  margin-top: 20px;
  .img {
    width: 40px;
    height: 40px;
    margin: 27px 37px;
  }
  .font1 {
    text-align: center;
    font-size: 15px;
    margin-top: -24px;
  }
  .font2 {
    text-align: center;
    font-size: 15px;
  }
}
.ques {
  width: 165px;
  height: 80px;
  background-color: rgb(234, 234, 236);
  margin-top: 15px;
  margin-left: 30px;
  margin-right: 10px;
  border-radius: 10px;
  float: left;
  color: black;
  font-weight: bold;
  .img {
    width: 40px;
    height: 40px;
    float: left;
    margin: 20px 10px;
  }
  .word1 {
    font-size: 15px;
    margin-top: 20px;
  }
  .word2 {
    font-size: 15px;
  }
}
.overques {
  width: 165px;
  height: 80px;
  background-color: rgb(234, 234, 236);
  margin-top: 15px;
  border-radius: 10px;
  float: left;
  color: black;
  font-weight: bold;
  .img {
    width: 30px;
    height: 40px;
    float: left;
    margin: 20px 20px;
  }
  .word1 {
    font-size: 15px;
    margin-top: 20px;
  }
  .word2 {
    font-size: 15px;
  }
}
.title2 {
  margin-top: -12px;
  text-align: center;
  font-weight: bolder;
}
.jingxuan {
  width: 95%;
  height: 100px;
  background-color: white;
  border-radius: 10px;
  margin-left: 10px;
  margin-top: 10px;
}
.q {
  width: 100%;
  height: 100px;
}
.multiple {
  font-size: 13px;
  text-align: center;
  color: rgb(66, 106, 237);
  width: 55px;
  height: 20px;
  border: rgb(66, 106, 237) 2px solid;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  position: absolute;
  margin: 10px 10px;
}
.title3 {
  position: absolute;
  margin: 10px 10px auto 80px;
  color: black;
  font-weight: bold;
  font-size: 18px;
}
.level {
  position: absolute;
  margin: 70px auto auto 10px;
  font-size: 13px;
  color: black;
}
</style>
